<template>
    <div class="chart" id="fourchart">
    </div>
</template>

<script>
    import { inject, onMounted, reactive ,} from "vue";
    import emitter from '../bus'
    export default {
      
      setup() {
      
      // 引入echarts
      let $echarts = inject("echarts");
      let $http = inject("axios");

      // 数据接收
      let fourData = reactive({});
      let xData = reactive([]);
      let yData = reactive([]);


      function setData(city) {
        let i=1;
        fourData.data.chartData.d1.forEach(d => {
				if (d['name'] == city) {
                    yData.push(d['pm2.5'])
					xData.push('2013010' + i)
                    i++;
				}
			})
        console.log(xData);
        console.log(yData);
      }
      async function getState() {
        fourData = await $http({ url: "/four/data" });
      }

      

        onMounted(() => {
          emitter.on("response", (response) => {
          console.log("交互：",response)
          drawRader(response)
          })
          drawRader('天津市')
          function drawRader(city){
        // 初始化echarts
        let myChart = $echarts.init(document.getElementById("fourchart"));
        getState().then(() => {
          setData(city);
          myChart.setOption({
            title: {
            text: '雷达图分析'
            },
            legend: {
            data: xData
            },
            radar: {
            indicator: [
                { name: '20130101', max: 100 },
                { name: '20130102', max: 100 },
                { name: '20130103', max: 100 },
                { name: '20130104', max: 100 },
                { name: '20130105', max: 100 },
                { name: '20130106', max: 100 },
                { name: '20130107', max: 100 },
                { name: '20130108', max: 100 },
                { name: '20130109', max: 100 }
            ]
            },
            series: [
            {
                name: 'Budget vs spending',
                type: 'radar',
                data: [
                {
                    value: yData,
                    name: xData
                }]
            }
            ]
          });
          window.onresize = myChart.resize;
        });
        }
      });
      
    
    

      

      return {
        getState,
        fourData,
        xData,
        yData,
        setData,
        emitter,
      };
    },
    
    }
    
</script>

<style lang="css" scoped>
  .chart {
    height: 400px;
  }
</style>